<template>
    <div id="content-menu" :style="style" v-if="show">
        <div   v-for="menu in menus" style="padding-left: 3px;user-select: none" :class="{menu:menu.call,disabled:!enable(menu)}" @click="menuCall(menu)">

            <div v-if="!menu.label" style="height: 2px;background-color: black;width: 90%;margin: 0 auto"></div>
            <template v-else>
                <div class="img" v-if="menu.icon"><img src="../assets/logo.png" width="16" height="16"/></div>
                <div class="img" v-else style="width: 16px;height: 16px;"></div>
                <div class="txt" style="width: 160px">{{menu.label}}</div>
                <div class="txt" v-if="menu.subMenu">
                    <a-icon type="caret-right"/>
                </div>
            </template>

        </div>

    </div>
</template>


<script>
    export default {
        name: "ContentMenu",
        data() {
            return {
                style: {
                    top: "0px",
                    left: "0px",
                },
                show: false,
                menus: []
            }
        },
        methods: {
            setPost(x, y) {
                this.style.top = y + "px";
                this.style.left = x + "px";
            },
            menuCall(menu) {
                console.debug("右键菜单",menu)
                if (!!menu.call) {
                    menu.call();
                }
            },
            enable(menu){
                if (typeof menu.enable === "boolean") {
                    return menu.enable;
                }
                if (typeof menu.enable === "function") {
                    return menu.enable();
                }
                return false;
            },
            open(e, menus) {
                this.setPost(e.clientX, e.clientY)
                this.show = true
                this.menus = menus
            },
            close() {
                this.show = false;
            }
        }, mounted() {
            window.addEventListener('contextmenu',  (e)=> {
                e.preventDefault()
                this.show = false;
            }, true)
            window.addEventListener("click", (e) => {
                this.show = false;
            }, false)
            // window.document.body.addEventListener("mousedown", (e) => {
            //     this.show = false;
            // }, false)
        }
    }
</script>

<style scoped>

    #content-menu {
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 5px;
        position: absolute;
        width: 200px;
        /*height: 100px;*/
        z-index: 9999999999;
        background: silver;
    }

    .img, .txt {


        display: inline-block;
        vertical-align: middle;
    }

    .menu {
        border-radius: 5px;
        color: #000000;
    }

    .menu:hover {
        cursor: pointer;
        background-color: white;

    }
    .disabled{
        color: #8d8b8b;
    }

</style>